/**
* Description:    抽奖大转盘
* Author:         TSY
* CreateDate:     2019/2/25 19:04
* email:          ttsy6.com
*/
<template>
    <div class="container">
        <div class="box">
            <p class="box-btn" @click="addPrize">添加奖项</p>
            <p class="box-btn" @click="deletePrize">删除一项</p>
        </div>
        <p class="score">{{ userInfo.user_name }}您剩余：<span>{{ userInfo.rank }}</span>积分</p>
        <div class="luck-wheel">
            <div class="wheel-pointer">
                <div class="wheel-pointer-btn" @click="getPrize">
                    <p>开始</p>
                    <p>抽奖</p>
                </div>
            </div>
            <div class="wheel-bg" :style="{transform: rotateAngle,transition: rotateTransition}">
                <div class="prize-list">
                    <div class="prize-item" v-for="(item,index) in prizeList" :key="index"
                         :style="{transform: `rotate({index * prizeAngle}deg)`, 'border-top-color': index % 2 == 0 ? prizeSplitColor : ''}"
                         :class="{'prize-color': item.is_default == 0}">
                        <div class="prize-name">
                            {{item.is_default == 1 ? item.name : item.level}}
                        </div>
                        <img v-if="item.is_default == 1" src="./assets/luckDraw/smile.png" alt="">
                        <div v-else class="prize-type">
                            {{item.name}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="prize-dialog" v-show="isShowPrizeDialog">
            <div class="prize-box">
                <div class="prize-title">{{ prizeInfo.is_default == 0 ? '恭喜您获得' : '非常遗憾' }}</div>
                <div class="prize-content">
                    <p v-if="prizeInfo.is_default == 0" class="prize-money">￥<span>{{ prizeInfo.name }}</span></p>
                    <img v-else class="no-prize" src="./assets/luckDraw/cry.png" alt="">
                    <p class="prize-name">{{ prizeInfo.is_default == 0 ? '现金红包' : '您并没有中奖' }}</p>
                    <div class="center-line">
                        <div class="center-line-text">{{ prizeInfo.is_default == 0 ? '确认过眼神，遇上对的人' : '可惜不是你，陪我到最后' }}
                        </div>
                    </div>
                    <div class="btn-group">
                        <div class="prize-btn" @click="closePrizeDialog">继续抽奖</div>
                        <div class="prize-btn" @click="sub">关注我</div>
                    </div>
                    <img @click="closePrizeDialog" class="prize-close" src="./assets/luckDraw/close.png" alt="">
                </div>
                <img src="./assets/luckDraw/firework.png" alt="">
            </div>
            <img v-show="prizeInfo.is_default == 0" class="prize-light" src="./assets/luckDraw/golden_light.png"
                 alt="">
        </div>
        <div class="qr-code" v-if="isShowQrcode">
            <img class="qr-code-img" src="./assets/luckDraw/qrcode.jpg" alt="">
            <span>长按二维码关注公众号</span>
            <img class="qr-code-close" @click="closeQrcode" src="./assets/luckDraw/close.png" alt="">
        </div>
    </div>
</template>

<script>

    export default {
        name: "LuckDraw",
        data() {
            return {
                userInfo: {
                    "user_name": "TSY",    //名称
                    "rank": "100",        //剩余积分
                },
                prizeList: [{
                    "award_id": "61",        //奖项id
                    "name": "0",        //奖项名称
                    "level": "",            //奖项等级
                    "is_default": "1"        // 是否为谢谢参与 1谢谢参与 0正常奖项
                },
                    {
                        "award_id": "62",
                        "name": "0",
                        "level": "",
                        "is_default": "1"
                    },
                    {
                        "award_id": "63",
                        "name": "10",
                        "level": "1",
                        "is_default": "0"
                    },
                    {
                        "award_id": "64",
                        "name": "5",
                        "level": "2",
                        "is_default": "0"
                    },
                    {
                        "award_id": "65",
                        "name": "1",
                        "level": "3",
                        "is_default": "0"
                    },
                    {
                        "award_id": "66",
                        "name": "0.01",
                        "level": "4",
                        "is_default": "0"
                    }],//当前活动的奖品列表
                costRank: 1,//抽一次奖消耗的积分
                startRotatingAngle: 0, //初始旋转角度
                duringTime: 6, //初始化转盘转动的时间
                isWheelRunning: false,//转盘是否在转动
                animate: false,
                isShowPrizeDialog: false,//是否显示获奖弹窗
                prizeInfo: {},//抽到的奖品信息
                isShowQrcode: false,//是否显示公众号二维码
            }
        },
        mounted() {

        },
        computed: {
            prizeAngle() {//每个奖品可分配的角度
                return 360 / this.prizeList.length;
            },
            rotateAngle() {//将要旋转的角度
                return `rotate({$this.startRotatingAngle}deg)`;
            },
            rotateTransition() {//控制转盘动画效果
                return `transform {$this.duringTime}s ease-in-out`;
            },
            prizeSplitColor() {
                return '#F1D5B0';
            }
        },
        methods: {
            addPrize() {//添加奖项
                this.prizeList.push({"award_id": "66", "name": "66", "level": this.prizeList.length - 1, "is_default": "0"});
            },
            deletePrize() {//删除奖项
                this.prizeList.pop();
            },
            start() {//开始转动转盘
                this.isWheelRunning = true;
                let roundCircle = 6;//多转几圈
                let index = Math.floor(Math.random() * this.prizeList.length);//随机中奖
                this.prizeInfo = this.prizeList[index];//中奖的奖品信息
                this.startRotatingAngle = this.startRotatingAngle + roundCircle * 360 + (this.prizeList.length - index) * this.prizeAngle - (this.startRotatingAngle % 360);//计算转到中奖商品位置时需要的角度
                this.startRotatingAngle = Math.floor(Math.random() * (this.prizeAngle - 10) + this.startRotatingAngle - this.prizeAngle / 2 + 5);//给指针在中奖区域一个随机的偏离角度
                // 旋转结束后，允许再次触发
                setTimeout(() => {
                    this.isWheelRunning = false;
                    this.isShowPrizeDialog = true;
                }, this.duringTime * 1000 + 1000); // 延时1S，保证转盘转完
            },
            getPrize() { //抽奖操作
                if (this.isWheelRunning) return;
                if (parseInt(this.userInfo.rank) < parseInt(this.costRank)) {
                    alert('剩余积分不足');
                    return;
                }
                this.userInfo.rank = parseInt(this.userInfo.rank) - parseInt(this.costRank);
                this.start();
            },
            closePrizeDialog() {//关闭获奖弹窗
                this.isShowPrizeDialog = false;
            },
            sub() {
                this.isShowPrizeDialog = false;
                this.nextTick(() => {
                    this.isShowQrcode = true;
                })
            },
            closeQrcode() {
                this.isShowQrcode = false;
            }
        }
    }
</script>

<style lang="stylus">
    @import "./style/reset.styl";
    @import "./style/common.styl";
    @import "./style/math.styl";

    .anim {
        transition: all 0.5s;
    }

    .container {
        position relative
        background url("./assets/luckDraw/hdxq_bg.png") no-repeat
        background-size 100% 100%
        min-height 100vh
        padding-bottom px2vw(100px)
    }

    .record {
        position absolute
        top px2vw(24px)
        right 0
        width px2vw(165px)
        text-align center
        background #FFD591
        color #C36C0B
        border-radius px2vw(27px) 0 0 px2vw(27px)
        padding px2vw(15px) 0
        fontSize(26px)
    }

    .box {
        paddingAround()
        flexContent()
    }

    .box-btn {
        text-align center
        padding px2vw(15px)
        margin-right px2vw(15px)
        border-radius px2vw(10px)
        background #FFD591
        color #C36C0B
    }

    .tab {
        width 90%
        margin-left 5%
        display flex
        margin-top px2vw(50px)
    }

    .tab-item {
        width 0
        flex 1
        text-align center
        padding px2vw(20px) 0
        color #FF3C17
        background #FDE59D
        box-shadow 0px px2vw(8px) 0px 0px #FFD06A
        fontSize(34px)
    }

    .tab-item:first-child {
        border-radius px2vw(100px) 0 0 px2vw(100px)
    }

    .tab-item:last-child {
        border-radius 0 px2vw(100px) px2vw(100px) 0
    }

    .tab-item-active {
        background linear-gradient(0deg, rgba(255, 198, 0, 1), rgba(255, 249, 69, 1))
        box-shadow 0px px2vw(8px) 0px 0px rgba(255, 148, 8, 0.8)
    }

    .score {
        width 100%
        text-align center
        color #FFE30C
        margin-top px2vw(60px)
    }

    .score span {
        color white
    }

    .luck-wheel {
        position relative
        width 100%
        flexContent()
        margin-top px2vw(20px)
    }

    .wheel-pointer {
        position absolute
        top 0
        left 0
        width 100%
        height 100%
        flexContent()
        z-index 1
    }

    .wheel-pointer-btn {
        width px2vw(206px)
        height px2vw(246px)
        background url("./assets/luckDraw/lottery_button.png") no-repeat
        background-size 100% 100%
        flexContent()
        flex-direction column
        color #FA4445
        fontSize(40px)
        padding-top px2vw(25px)
        font-weight bold
    }

    .wheel-bg {
        width px2vw(656px)
        height px2vw(656px)
        background url("./assets/luckDraw/wheel_bg.png") no-repeat
        background-size 100% 100%
    }

    sector(radius, count, color)
        diameter = 2 * radius
        position relative
        width diameter
        height diameter
        border-radius 50%
        overflow hidden
        .prize-item
            position absolute
            top 0
            left 50%
            display flex
            align-items center
            justify-content space-between
            flex-direction column
            if count == 1
                width diameter
                height diameter
                background-color color
             else if count == 2
                    width diameter
                    height radius
                    background-color color
             else
                width 0
                height 0
                border radius solid transparent
                borderWidth = tan(pi() / count) * radius * 2 + 10
                border-left-width borderWidth
                border-right-width borderWidth
                border-top-color color
        for index in range(0, count)
            .prize-item:nth-child({index + 1})
                transform = translate(-50%, 0) rotate(360deg / count / 2 + 360deg * index / count)
                if count == 2
                    origin = bottom, center
                -webkit-transform transform
                transform transform
                -webkit-transform-origin origin
                transform-origin origin

    .prize-list {
        position relative
        sector(100px, 6, #fdf3aa)
        width 200px
        height 200px
    }

    .prize-color {
        color #FF302D
    }

    .prize-type {
        font-weight bold
    }

    .prize-type, .prize-item img {
        margin-bottom px2vw(100px)
    }

    .prize-item img {
        width px2vw(50px)
    }



    .prize-dialog {
        position fixed
        top 0
        left 0
        width 100vw
        height 100vh
        background rgba(0, 0, 0, .6)
        z-index 10
    }

    .prize-light {
        width px2vw(664px)
        margin-top px2vw(50px)
        margin-left px2vw(52px)
    }

    .prize-box {
        position absolute
        width px2vw(500px)
        top px2vw(288px)
        left px2vw(125px)
        background #D83641
        border-radius px2vw(10px)
    }

    .prize-box > img {
        position absolute
        width px2vw(570px)
        top px2vw(-60px)
        left px2vw(-34px)
    }

    .prize-title {
        position absolute
        width px2vw(300px)
        height px2vw(80px)
        top px2vw(-40px)
        left px2vw(100px)
        background url("./assets/luckDraw/diamond.png") no-repeat
        background-size 100% 100%
        font-weight bold
        color #FF3C17
        flexContent()
        fontSize(36px)
        z-index 1
    }

    .prize-content {
        position relative
        color #FFD591
    }

    .prize-money {
        text-align center
        margin-top px2vw(120px)
    }

    .prize-money span {
        font-weight bold
        text-align center
        fontSize(90px)
    }

    .no-prize {
        width px2vw(282px)
        height px2vw(146px)
        margin-top px2vw(76px)
        margin-left px2vw(112px)
    }

    .prize-name {
        text-align center
        margin-top px2vw(52px)
    }

    .center-line {
        position relative
        width 100%
        height px2vw(3px)
        background #C02A34
        margin-top px2vw(78px)
    }

    .center-line-text {
        position absolute
        width px2vw(346px)
        height px2vw(60px)
        top px2vw(-30px)
        left px2vw(77px)
        flexContent()
        border 2px solid #C02A34
        border-radius px2vw(100px)
        background #D83641
        fontSize(26px)
    }

    .btn-group {
        width px2vw(400px)
        margin-top px2vw(90px)
        margin-left px2vw(50px)
        color #C36C0B
    }

    .prize-btn {
        padding px2vw(20px) 0
        text-align center
        fontSize(34px)
        background #FFD591
        border-radius px2vw(10px)
        margin-bottom px2vw(20px)
    }

    .prize-close {
        position absolute
        left px2vw(215px)
        bottom px2vw(-130px)
        width px2vw(70px)
    }

    .qr-code {
        position fixed
        top 0
        left 0
        width 100vw
        height 100vh
        flexContent()
        flex-direction column
        background rgba(0, 0, 0, .6)
        z-index 10
    }

    .qr-code-img {
        width 50%
    }

    .qr-code-close {
        width px2vw(70px)
        margin-top px2vw(70px)
    }

    .qr-code span {
        color white
        margin-top px2vw(25px)
        fontSize(26px)
    }
</style>